import {
  BulbFilled,
  CheckCircleOutlined,
  ClearOutlined,
  CoffeeOutlined,
  CommentOutlined,
  DeleteOutlined,
  HighlightOutlined,
  NodeExpandOutlined,
  RadiusSettingOutlined,
  ScheduleOutlined,
  SmallDashOutlined,
} from "@ant-design/icons";
import { Button, Card, Col, Drawer, notification, Row, Space } from "antd";
import "antd/dist/antd.css";
import Text from "antd/lib/typography/Text";
import React from "react";
import { ENTER_TYPE } from "./BodyBuilder";
import { beginSelecting, endSelecting } from "./DetailDrawerBuilder";
import "./DrawerBuilder.css";
import { beginDijkstra, endDijkstra } from "./geom/Dijkstra";
import { getMainMap } from "./geom/MainMap";
import { beginMeasure, doneMeasure } from "./geom/measurelib";
import conf from "./runtime/configuration";

type State = {
  visible: boolean;
};

type Props = {
  visible: boolean;
  openRoutingList: () => void;
  closeRoutingList: () => void;
  clearRoutingList: () => void;
  beginRouting: () => void;
  doneRouting: () => void;
  openMoreRouting: () => void;
};

export default class DrawerBuilder extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { visible: props.visible };
  }

  componentDidMount() {
    notification.open({
      message: "欢迎来到国色天乡",
      description: (
        <>
          点击
          <BulbFilled />
          唤醒控制台
        </>
      ),
      icon: <CoffeeOutlined />,
    });
    if (ENTER_TYPE === "EDIT") {
      this.props.openRoutingList();
      notification.open({
        message: "开启编辑",
        description: (
          <span>
            点击想要访问的地点，在弹出的详细介绍底部将喜欢的景点添加到计划中！在控制台
            <BulbFilled />
            中点击<Text keyboard>隐藏计划</Text>来隐藏计划栏。
          </span>
        ),
        icon: <HighlightOutlined />,
      });
    } else if (ENTER_TYPE === "READ") {
      this.props.openMoreRouting();
    }
  }

  openDrawer = () => {
    this.setState({ visible: true });
  };

  closeDrawer = () => {
    this.setState({ visible: false });
  };

  withAutoClose =
    (
      onClick: any,
      note?: {
        message: string;
        description: React.ReactNode;
        icon: React.ReactNode;
      }
    ) =>
    () => {
      if (note !== undefined) {
        notification.open({
          message: note?.message,
          description: note?.description,
          icon: note?.icon,
        });
      }
      onClick();
      this.closeDrawer();
    };

  beginShortRouting = () => {
    notification.open({
      message: "搜索最短路径",
      description:
        "点击地图中的任意一点作为起点，再点击另外一点作为终点搜索最短路径",
      icon: <NodeExpandOutlined />,
    });
    endSelecting();
    beginDijkstra();
    getMainMap().getView().animate({ zoom: 16 });
  };

  endShortRouting = () => {
    endDijkstra();
    beginSelecting();
  };

  render() {
    const { visible } = this.state;
    return (
      <>
        <Button
          shape="circle"
          size="large"
          id="console-trigger"
          type="primary"
          onClick={this.openDrawer}
          icon={<BulbFilled />}
        ></Button>
        <Drawer
          placement="bottom"
          closable={false}
          visible={visible}
          forceRender={true}
          onClose={this.closeDrawer}
          bodyStyle={conf.styles.drawer}
        >
          <Row>
            <Col span={8}>
              <Space direction="vertical">
                <Row>
                  <Col span={24}>
                    <Space>
                      <Button
                        ghost
                        icon={<SmallDashOutlined />}
                        onClick={this.withAutoClose(() =>
                          beginMeasure("LineString")
                        )}
                      >
                        测量长度
                      </Button>
                      <Button
                        ghost
                        icon={<RadiusSettingOutlined />}
                        onClick={this.withAutoClose(() =>
                          beginMeasure("Polygon")
                        )}
                      >
                        测量面积
                      </Button>
                      <Button
                        ghost
                        icon={<ClearOutlined />}
                        onClick={this.withAutoClose(() => doneMeasure())}
                      >
                        清除
                      </Button>
                    </Space>
                  </Col>
                </Row>
                <Row>
                  <Col span={24}>
                    <Space>
                      <Button
                        ghost
                        icon={<ClearOutlined />}
                        onClick={this.withAutoClose(this.beginShortRouting)}
                      >
                        最短路径
                      </Button>
                      <Button
                        ghost
                        icon={<ClearOutlined />}
                        onClick={this.withAutoClose(this.endShortRouting)}
                      >
                        结束
                      </Button>
                    </Space>
                  </Col>
                </Row>
              </Space>
            </Col>
            <Col span={7} offset={1}>
              <Card
                title={
                  <Space>
                    <ScheduleOutlined />
                    <span>计划栏</span>
                  </Space>
                }
                headStyle={conf.styles.drawerCard}
                bodyStyle={conf.styles.drawerCard}
                bordered={false}
              >
                <Space>
                  <Button
                    size="large"
                    onClick={this.withAutoClose(this.props.openRoutingList, {
                      message: "显示计划",
                      description: (
                        <span>
                          在控制台
                          <BulbFilled />
                          中点击<Text keyboard>隐藏计划</Text>关闭计划栏。
                        </span>
                      ),
                      icon: <CheckCircleOutlined />,
                    })}
                    className="drawer-card-btn"
                  >
                    显示计划
                  </Button>
                  <Button
                    size="large"
                    className="drawer-card-btn"
                    onClick={this.withAutoClose(this.props.closeRoutingList, {
                      message: "隐藏计划",
                      description: (
                        <span>
                          在控制台
                          <BulbFilled />
                          中点击<Text keyboard>显示计划</Text>再次打开计划栏！
                        </span>
                      ),
                      icon: <CheckCircleOutlined />,
                    })}
                  >
                    隐藏计划
                  </Button>
                  <Button
                    size="large"
                    className="drawer-card-btn"
                    onClick={this.withAutoClose(this.props.clearRoutingList, {
                      message: "清空计划",
                      description: "让我们重新开始！",
                      icon: <DeleteOutlined />,
                    })}
                  >
                    清空计划
                  </Button>
                </Space>
              </Card>
            </Col>
            <Col span={7} offset={1}>
              <Card
                title={
                  <Space>
                    <CommentOutlined />
                    发现更多计划！
                  </Space>
                }
                headStyle={conf.styles.drawerCard}
                bodyStyle={conf.styles.drawerCard}
                bordered={false}
              >
                <Space>
                  <Button
                    size="large"
                    className="drawer-card-btn"
                    onClick={this.withAutoClose(this.props.openMoreRouting)}
                  >
                    热门计划
                  </Button>
                </Space>
              </Card>
            </Col>
          </Row>
        </Drawer>
      </>
    );
  }
}
